<template>
    <!-- 定义组件的模板部分，使用一个 div 作为容器 -->
    <div class="box">
        <!-- 使用 Element UI 的 el-breadcrumb 组件创建面包屑导航，设置分隔符为斜杠 / -->
        <el-breadcrumb separator="/">
            <!-- 使用 v-for 指令遍历计算属性 math 返回的路由匹配记录数组 -->
            <!-- 为每个路由匹配记录创建一个 el-breadcrumb-item 组件 -->
            <!-- 为每个面包屑项设置唯一的 key，使用路由的 path 属性 -->
            <!-- 为每个面包屑项绑定路由跳转路径，通过 to 属性指定 -->
            <el-breadcrumb-item v-for="item in math" :key="item.path" :to="{ path: item.path }">
                <!-- 显示当前路由记录的 meta 对象中的 title 属性 -->
                {{ item.meta.title }}
            </el-breadcrumb-item>
        </el-breadcrumb>
    </div>
</template>

<script>
export default {
    computed: {
        math() {
            // 复制当前路由匹配的记录数组，避免直接修改原始的路由匹配记录
            let route = [...this.$route.matched];
            // 检查是否存在匹配的路由记录
            if (route.length > 0) {
                // 将第一个路由匹配记录的 path 属性修改为 '/home'
                route[0].path = "/home";
                // 检查第一个路由记录的 meta 对象是否存在
                if (!route[0].meta) {
                    // 如果 meta 对象不存在，则创建一个空的 meta 对象
                    route[0].meta = {};
                }
                // 为第一个路由记录的 meta 对象添加 title 属性，并设置值为 '首页'
                route[0].meta.title = "首页";
            }
            // 返回修改后的路由匹配记录数组
            return route;
        }
    },
    mounted() {
        // 在组件挂载完成后，打印当前的路由信息，方便调试查看
        console.log(this.$route);
    }
};
</script>

<style lang="less" scoped>
.box{
    padding:10px;
}
</style>    